<template>
    <div class="left">
        <div class="title">
            <p>{{ leftTitle }}</p>
        </div>
        <div class="nav">
            <div
                v-for="(item, index) in navList"
                :key="index"
                :class="curIndex == index ? 'nav-on' : ''"
            >
                <a href="JavaScript:;" @click="onLeftTab(item, index)">
                    <p>{{ item.title }}</p>
                    <i class="iconfont iconjiantou"></i>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        leftTitle: {
            type: String,
        },
        navList: {
            type: Array,
        },
        curIndex: {
            type: Number,
            default: 0,
        },
        path: {
            type: String,
        },
    },
    data() {
        return {};
    },
    methods: {
        onLeftTab(data, index) {
            this.$emit("onLeftTab", index, data);
        },
    },
};
</script>

<style scoped>
.title {
    height: 45px;
    line-height: 45px;
    width: 280px;
    padding: 0 25px;
    box-sizing: border-box;
    background-color: #371f75;
    margin: 20px 0;
    color: #fff;
}

.nav div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    width: 280px;
    background-color: #f2f2f2;
    margin-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

.nav div a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    padding: 0 25px;
}
.nav div i {
    transform: rotate(180deg);
    font-size: 14px;
}
.nav .nav-on {
    background-color: rgb(192, 38, 54);
    color: #fff;
}
.nav .nav-on i {
    color: #fff;
}
</style>
